<script setup>
import {onMounted} from 'vue'
import {
  NAvatar,
  NButton,
  NFlex,
  NForm,
  NFormItem,
  NImage,
  NInput,
  NSelect,
  NTabPane,
  NTabs,
  NTag,
  useMessage
} from 'naive-ui'

import CommonPage from '@/components/page/CommonPage.vue'
import api from '@/api'
import default_image from "@/assets/images/mz.jpg";
import {getToken, renderIcon} from "@/utils";
import TheIcon from "@/components/icon/TheIcon.vue";
import {useCRUD} from "@/composables";
import CrudModal from "@/components/table/CrudModal.vue";
const base_path = import.meta.env.VITE_BASE
const message = useMessage()
const {
  modalVisible,
  modalAction,
  modalTitle,
  modalLoading,
  handleAdd,
  handleDelete,
  handleEdit,
  handleSave,
  modalForm,
  modalFormRef,
} = useCRUD({
  name: '病例',
  initForm: {},
  doCreate: api.createOrder,
  doDelete: api.deleteOrder,
  doUpdate: api.updateOrder,
  refresh: () => on_ref(),
})

const props = defineProps({
  infoData: {
    type: Object,
    required: true
  }
});
const data = reactive({
    orders:[],
    card_loading:false,
    select_customer:{
    name:"未选择",
    card_number:"--",
    user_level_name:"--",
    mobile:"--",
    bi_date:"--",
    sex:"--",
    hkqd:"--",
    age:"--",
    created_at:"--",
    last_come:"--",
    record_hobby:[],
    totals:{
    weimei:0,
    cdp:0,
    fujia:0,
    other:0,
    buy_money:0,
    cases:0,
    appoint_count:0,
    return_count:0,
    operation_count:0,
    face_count:0,
    test_count:0,
    having_customers:0,
    customers_level5:0

    }
    },
    tab_goods:[],
    meeting_users:[],
    config:[],
    uploadAction: base_path+'/system/base/userimg',
    token: getToken(),
    pay:false,
    pay_data:[],
    payForm: {
      id:0,
      order_id:0,
      pay_type:3,
      images:[],
      images_pc:[]
    },
    get_jf_data:[],
    fjq:[],
    keyword:"",
    up_photo:false,
    PhotoForm:{
      id:0,
      before_images:[],
      after_images:[]
    }
});

onMounted(() => {
  data.select_customer = props.infoData
  on_ref()
})


function on_ref(){
  get_order_list()
}

function get_order_list(){
  data.card_loading = true
  api.getCases({
    user_id:data.select_customer.user_id,
    keyword:data.keyword
  }).then((res) => {
     data.orders = res.data.items
     data.card_loading = false
     data.loading = false
  })
}


function search_order(){
  data.loading = true
  get_order_list()
}

const handleFinish = ({ file, event }) => {
  let data = (event?.target).response
  data = JSON.parse(data)
  if (data.code === 200) {
    file.url = data.data.url
    message.success('上传成功')
  } else {
    message.error(data.data)
  }

  return file
}

function go_up_photo(item){
    data.up_photo = true
    data.PhotoForm.before_images = []
    data.PhotoForm.after_images = []
    data.PhotoForm.id = item.id

}
function save_photo(){
    data.PhotoForm.before_images = data.PhotoForm.before_images.map(item => item.url);
    data.PhotoForm.after_images = data.PhotoForm.after_images.map(item => item.url);
    api.updateCasesPhoto(data.PhotoForm).then((res) => {
       message.success('对比照上传成功')
       data.up_photo = false
       on_ref()
    })
}

</script>
<template>
  <div class="container" style="height: calc(100vh - 106px);">
    <div class="search">
      <NInput size="large"  @change="search_order" v-model:value="data.keyword"  :loading="data.loading" clearable type="text" placeholder="请输入卡项,项目名称检索"/>
    </div>
     <n-spin :show="data.card_loading" style="--n-opacity-spinning:0.1;height: calc(100vh - 225px);">
       <n-scrollbar v-if="data.orders.length>0" style="max-height: calc(100vh - 180px);padding:0 20px 20px 0px">
          <n-collapse  class="cards" accordion  :default-expanded-names="[data.orders[0].id]">
        <n-collapse-item :name="item.id" v-for="item in data.orders" class="card" :disabled="!item.image_staus==='已上传'">
          <template #header>
            <div style="display: flex; align-items: center;justify-content: flex-start">
              <n-h6 prefix="bar" type="info" style="margin: 0;font-size: 16px">
                <div style="display: flex">
                <n-button type="info" dashed size="large">病例单号:{{item.id}}</n-button>
              <div style="height:40px;line-height:20px;margin-left: 10px">
                <span v-for="item2 in item.projects" style="margin-right: 5px">
                  {{item2.title}}<span style="font-size: 12px">X{{item2.num}}</span>
                </span>
                <br>
                <span style="font-size: 12px;color:#747586">操作于:{{item.created_at}}</span>
              </div>
                </div>
              </n-h6>
            </div>
          </template>
          <template #header-extra>
             <n-button type="primary"    dashed  v-if="item.image_staus==='已上传'">{{item.image_staus}}</n-button>
             <n-button type="primary" @click="go_up_photo(item)"  v-else>
               <TheIcon icon="material-symbols:database-upload-outline" :size="16" class="mr-5" />上传</n-button>
          </template>

          <div class="project_list">
            <n-grid x-gap="12" y-gap="12" :cols="2">
      <n-gi>

              <n-card size="small"  :bordered="false" hoverable content-style="padding: 0px;" :segmented="{content: true,footer: 'soft',}">
                  <template #header><n-h6 prefix="bar" style="margin: 0;font-size: 14px">术前照片</n-h6></template>
                  <template #footer>
                    <n-scrollbar x-scrollable>
                    <div style="display: flex">
                          <n-image style="height:100px;border-radius: 5px;margin-right: 2px"  :src="img" v-for="img in item.before_images"/>
                    </div>
                    </n-scrollbar>
                  </template>
                </n-card>
      </n-gi><n-gi>

                <n-card size="small"  :bordered="false" hoverable content-style="padding: 0px;" :segmented="{content: true,footer: 'soft',}">
                  <template #header><n-h6 prefix="bar" style="margin: 0;font-size: 14px">术后照片</n-h6></template>
                  <template #footer>
                    <n-scrollbar x-scrollable>
                    <div style="display: flex">
                          <n-image style="height:100px;border-radius: 5px;margin-right: 2px"  :src="img" v-for="img in item.after_images"/>
                    </div>
                    </n-scrollbar>
                  </template>
                </n-card>
            </n-gi>
            </n-grid>


            </div>

        </n-collapse-item>
      </n-collapse>
      </n-scrollbar>
       <n-empty v-else description="暂无数据"  style="margin: 50px"></n-empty>
     </n-spin>

  </div>

    <CrudModal
      v-model:visible="data.up_photo"
      title="对比照上传"
      @save="save_photo"
    >
      <NForm
        label-placement="left"
        label-align="left"
        :label-width="80"
        :model="data.PhotoForm"
      >
        <NFormItem label="术前照片" path="before_images" style="width: 100%">
              <NUpload :action="data.uploadAction" :headers="{ authorization: data.token }" multiple list-type="image-card"
                       @finish="handleFinish" v-model:file-list="data.PhotoForm.before_images">
              </NUpload>
        </NFormItem>

        <NFormItem label="术后照片" path="after_images" style="width: 100%">
              <NUpload :action="data.uploadAction" :headers="{ authorization: data.token }" multiple list-type="image-card"
                       @finish="handleFinish" v-model:file-list="data.PhotoForm.after_images">
              </NUpload>
        </NFormItem>
      </NForm>


    </CrudModal>


</template>


<style>
 .container{
   padding: 10px;
   //transform: translate(0);
   position: relative;
   height:100%;
   .search{
     margin-bottom: 10px;
   }
 }
 .cards{
   margin:0px;
 }
 .project{margin-bottom: 10px;}
 .project_list{
   background: #f3f3f3;
   padding: 20px;
   border-radius: 5px;

 }
 .add_cases{
   height:60px;
   position: absolute;
   bottom: 0;
   background: #eee;
   width: 100%;
   padding: 10px;
   border-top-left-radius: 5px;
 }

</style>